Step 3: Build Your First Experiment

Create your own interactive experiment from scratch

🎯 Goal: Create Your Own Working Experiment

In this step, you'll create your own experiment folder and build your first interactive experiment based on your Step 0 research. This is where you transition from following examples to building your own psychology research tool.

Create Your Project: Set up your own experiment folder with proper structure
Build Interactions: Create buttons and inputs specific to your research
Log Data: Capture participant responses in the browser console
Test Locally: Verify everything works before moving to the next step

⚡ Reference Example: Test Your Deployment

First, test that your deployment works with our Rock-Paper-Scissors example. This confirms your setup is working correctly before you build your own experiment.

Rock Paper Scissors - Deployment Test

Choose your move to test logging:

Ready - Click a button to test console logging

💡 Testing Instructions: Press F12 → Console tab, then click buttons above. You should see structured data logged for each click. We'll walk through setting this up for your experiment by the end of this step.

📋 How the Example Works (Simplified)

1. HTML Button → JavaScript Function Connection

<button onclick="logChoice('Rock')">🗿 Rock</button>

When clicked, this calls the logChoice('Rock') function with 'Rock' as the parameter.

2. JavaScript Logging Function

                    function logChoice(choice) {
    const trialData = {
        timestamp: new Date().toISOString(),
        choice: choice,
        trial: trialCount++
    };
    console.log('✅ Trial:', trialData);
}
                

This function creates a data object with timestamp and choice, then logs it to the console.

🏗️ Build Your Own: Create Your Experiment

1. Create Your Project Folder

In your main project directory (same level as "Mock Project"), create your own experiment folder:

Create a new folder named after your project (e.g., "My Project", "Sarah's Study", "Memory Experiment")
Inside this folder, create index.html
Create experiment.js for your JavaScript code
Your structure should look like:

                    your-project-folder/
├── Mock Project/ (our examples)
├── Your Project Name/
│   ├── index.html (your experiment)
│   └── experiment.js (your code)
├── styles.css
└── index.html (main homepage)
                

2. Basic HTML Structure

Create your index.html file with this basic structure, adapted for your experiment:

                    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Your Experiment Name</title>
    <link rel="stylesheet" href="../styles.css">
</head>
<body>
    <div class="container">
        <h1>Your Experiment Title</h1>
        <p>Brief description of what participants will do</p>
        
        <!-- Your experiment buttons/inputs here -->
        <button onclick="logResponse('Option1')">First Choice</button>
        <button onclick="logResponse('Option2')">Second Choice</button>
        
        <div id="status">Ready</div>
    </div>
    <script src="experiment.js"></script>
</body>
</html>
                

3. JavaScript Logging Function

Create your experiment.js file with basic data logging:

                    let experimentData = [];
let trialCount = 0;

function logResponse(response) {
    trialCount++;
    const trialData = {
        trial: trialCount,
        timestamp: new Date().toISOString(),
        response: response,
        // Add other data you want to track
    };
    
    experimentData.push(trialData);
    console.log('✅ New Trial:', trialData);
    console.log('📊 All Data:', experimentData);
    
    // Update page feedback
    document.getElementById('status').innerHTML = 
        `Trial ${trialCount}: Recorded '${response}'`;
}
                

4. Adapt for Your Research

Customize the template based on your Step 0 study design:

Memory Task: Buttons for "Remember"/"Forget", word lists, recognition choices
Decision Making: Risk level sliders, choice buttons, preference ratings
Attention Task: Detection buttons, direction indicators, timing elements
Social Psychology: Agreement scales, scenario responses, demographic questions
Perception: Image comparison, size judgments, color matching

5. Link Your Experiment to the Homepage

Once your experiment is working, add it to the main homepage:

Open the main index.html file in your project root
Find the commented section that says "UNCOMMENT THIS SECTION IN STEP 3"
Remove the  comment tags
Update the experiment name, description, and folder path
Save and test locally by opening the homepage in your browser

🚀 Deploying Your Changes to the Web

For your new link to work on your public GitHub Pages site, you need to "commit" and "push" your changes. This saves a new version of your project and updates the live website.

Method 1: Using the Cursor/VS Code GUI (Recommended)

Go to the Source Control tab (the icon with three connected dots) in the left-hand sidebar.
You will see your changed files listed under "Changes".
In the "Message" box at the top, type a short description of your changes (e.g., "Add my experiment to homepage").
Click the Commit button.
Finally, click the Sync Changes button to push your updates to GitHub. Your site should be updated in a few minutes.

Method 2: Using Git Commands in the Terminal

Open the terminal (in Cursor: `Terminal > New Terminal`) and run these commands one by one:

git add .

This stages all your changes for the next commit.

git commit -m "Add my experiment to homepage"

This saves your changes with a descriptive message.

git push

This uploads your saved changes to GitHub, updating your live site.

🤖 AI-Assisted Development

Use Cursor to Generate Your Experiment Code:

Before using the prompt below, you need to prepare the context for the AI:

Use your study-plan.md file that you created in Step 0 in context by @-mentioning it.

Once you've done that, copy the following prompt to generate your experiment code:

AI Prompt: Generate Experiment Code

Based on my Step 0 research planning, help me create my first interactive experiment:

Please create:

HTML with appropriate buttons/inputs for my specific task
JavaScript function to capture responses and log structured data
Console logging to verify data collection works
Basic participant feedback after each response

Keep it simple for Step 3 - just basic interaction and console logging. I'll add data storage and analysis in later steps.

✅ Step 3 Completion Checklist

Created your own experiment folder with proper structure Built HTML with experiment-specific buttons/inputs JavaScript function logs structured data to console Experiment runs locally without errors Console shows clear, structured data for each interaction Updated main homepage to link to your experiment Confirmed your experiment addresses your Step 0 research question

🔧 Troubleshooting

Buttons not responding? Check browser console (F12) for JavaScript errors
No console output? Ensure developer tools are open and you're on Console tab
"Function not found" errors? Verify your JavaScript file is properly linked in HTML
Styles not loading? Check that your CSS path is correct (../styles.css)
Experiment not fitting your research? Revisit Step 0 planning and adapt the structure